<template>
    <!-- 主容器 -->
  <div class="farmer-auth-container">
    <!-- 返回按钮 -->
    <div class="back-to-home">
      <el-button type="success" @click="router.go(-1)" class="back-button"
      ><el-icon><ArrowLeft /></el-icon>返回</el-button>
    </div>
    <!-- 根据认证状态显示不同的内容 -->
     <!-- 1.未提交  对应的是0-->
      <div v-if="authStatus === '0'">
        <!-- 认证申请的头部 -->
        <div class="auth-header">
          <h2>农户认证申请</h2>
          <p>通过认证后，您可以在平台上销售产品，获得更多销售渠道</p>
        </div>
        <!-- 表单容器 -->
        <div class="auth-form-container">
          <FarmerAuth/>
        </div>
      </div>
        <!-- 2.待认证  对应的是1 -->
        <div v-else-if="authStatus === '1'">
          <div class="status-container">
            <el-result icon="primary" title="认证审核中" class="status-container-info">
              <template #extra>
                <p>我们已收到您的认证申请，预计1-3个工作日完成审核</p>
              </template>
            </el-result>
          </div>
        </div>
        <!-- 3.认证通过 对应的是2 -->
         <div v-else-if="authStatus === '2'">
          <div class="status-container">
            <el-result icon="success" title="认证通过！" class="status-container-info">
              <template #extra>
                <p>恭喜！您已认证通过</p>
                <el-button @click="handleToManage" type="primary" style="margin-top: 1px;">进入土特产后台管理</el-button>
              </template>
            </el-result>
          </div>
         </div>

          <!-- 3.认证失败 对应的是3 -->
          <div v-else-if="authStatus === '3'">
          <div class="status-container">
            <el-result icon="error" title="认证失败！" class="status-container-info">
              <template #extra>
                <p>不好意思 你不符合我们的农户要求！</p>
                <p>拒绝理由是：{{ rejectReason }}</p>
                <el-button @click="handleReset" type="primary" :loading="loading">重新认证</el-button>
              </template>
            </el-result>
          </div>
         </div>
  </div>
</template>
<script setup>
import { getAuthStatusInfo, updateAuthRejectInfo } from '@/api/assisting/farmers'
import FarmerAuth from '@/components/FarmerAuth'
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'

// 加载状态
const loading=ref(false)
// 获取路由实例
const router = useRouter()
// 定义认证状态
const authStatus = ref("")
// 定义拒绝理由
const rejectReason = ref("")
// 引入后台管理地址
const backendUrl = import.meta.env.VITE_APP_BACKEND_URL 

getAuthStatusInfo().then(res => {
  console.log("asd", res)
})
// 重新认证函数
const handleReset = () => {
  loading.value = true // 开始加载

  const data = {
    authStatus: 1,
    rejectReason: ''
  }

  updateAuthRejectInfo(data).then(res => {
    // 刷新页面
    setTimeout(() => {
      getAuthStatus()
      loading.value = false // 请求完成，结束加载
    }, 1500)
  }).catch(error => {
    console.error('重新认证失败:', error)
    loading.value = false // 出错时也要结束加载
  })
}
// 跳转到后台管理
const handleToManage = () => {
 window.open(backendUrl)
}
// 获取认证状态
const getAuthStatus = () => {
  getAuthStatusInfo().then((res) => {
    authStatus.value = res.data.authStatus
    rejectReason.value = res.data.rejectReason
  })
}
// 页面初始化
onMounted(() => {
  getAuthStatus()
})
</script>
<style scoped>
/* 主容器样式 */
.farmer-auth-container {
  max-width: 900px;
  /* 最大宽度限制 */
  margin: 0 auto;
  /* 水平居中 */
  padding: 20px;
  /* 内边距 */
}

/* 上传提示文字样式 */
.upload-tip {
  margin-top: 8px;
  /* 上边距 */
  font-size: 14px;
  /* 字体大小 */
  color: #999;
  /* 文字颜色 */
  line-height: 1.5;
  /* 行高 */
}

/* 返回按钮容器 */
.back-to-home {
  margin-bottom: 20px;
  /* 下边距 */
}

/* 返回按钮样式 */
.back-button {
  padding: 0;
  /* 内边距清零 */
  font-size: 16px;
  /* 字体大小 */
  color: #666;
  /* 文字颜色 */
}

/* 返回按钮悬停效果 */
.back-button:hover {
  color: #3AAE6E;
  /* 悬停颜色 */
}

/* 返回按钮图标样式 */
.back-button .el-icon {
  margin-right: 5px;
  /* 图标右边距 */
}

/* 认证头部样式 */
.auth-header {
  text-align: center;
  /* 文字居中 */
  margin-bottom: 30px;
  /* 下边距 */
}

/* 认证标题样式 */
.auth-header h2 {
  font-size: 28px;
  /* 字体大小 */
  color: #2c8a3e;
  /* 文字颜色 */
  margin-bottom: 10px;
  /* 下边距 */
}

/* 认证描述文字样式 */
.auth-header p {
  font-size: 16px;
  /* 字体大小 */
  color: #666;
  /* 文字颜色 */
}

/* 步骤条样式 */
.auth-steps {
  margin-bottom: 40px;
  /* 下边距 */
}

/* 表单容器样式 */
.auth-form-container {
  background-color: #fff;
  /* 白色背景 */
  padding: 30px;
  /* 内边距 */
  border-radius: 8px;
  /* 圆角 */
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  /* 阴影效果 */
}

/* 表单区域样式 */
.auth-form-section {
  padding: 20px;
  /* 内边距 */
}

/* 表单操作按钮区域 */
.form-actions {
  margin-top: 30px;
  /* 上边距 */
  text-align: center;
  /* 文字居中 */
}

/* 审核区域样式 */
.review-section {
  padding: 20px;
  /* 内边距 */
}

/* 上传材料预览区域 */
.upload-review {
  margin-top: 30px;
  /* 上边距 */
}

/* 上传材料预览标题 */
.upload-review h4 {
  margin-bottom: 20px;
  /* 下边距 */
  color: #333;
  /* 文字颜色 */
  font-size: 18px;
  /* 字体大小 */
}

/* 单个上传项样式 */
.upload-item {
  margin-bottom: 20px;
  /* 下边距 */
}

/* 上传项标题样式 */
.upload-item h5 {
  margin-bottom: 10px;
  /* 下边距 */
  color: #666;
  /* 文字颜色 */
}

/* 预览图片容器 */
.preview-images {
  display: flex;
  /* 弹性布局 */
  gap: 10px;
  /* 子项间距 */
  flex-wrap: wrap;
  /* 允许换行 */
}

/* 预览图片样式 */
.preview-images .el-image {
  width: 100px;
  /* 宽度 */
  height: 100px;
  /* 高度 */
  border: 1px solid #eee;
  /* 边框 */
  border-radius: 4px;
  /* 圆角 */
}

/* 状态容器公共样式 */
.status-container {
  max-width: 600px;
  /* 最大宽度 */
  margin: 50px auto;
  /* 外边距 */
  padding: 30px;
  /* 内边距 */
  background: #fff;
  /* 白色背景 */
  border-radius: 8px;
  /* 圆角 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  /* 阴影效果 */
}
</style>